<template>
  <div class="app">
    <ul>
      <li v-for="(item, index) in list" :key="item.id">
        <div class="listinfo">
          <div class="info-left">
            <h3>{{ item.source }}</h3>
            <p>{{ item.title }}</p>
          </div>
          <div class="info-right">
            <img :src="item.img" alt="" />
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import axios from "axios";
import { onMounted, ref } from "vue";

const list = ref();

onMounted(async () => {
  let AxiosInfo = await axios.get("http://hmajax.itheima.net/api/news");
  // console.log(AxiosInfo);
  list.value = AxiosInfo.data.data;
  // console.log(list.value);
});
</script>

<style lang="scss" scoped>
.listinfo {
  width: 30%;
  display: flex;
  justify-content: space-between;
  // align-items: center;
  .info-right {
    img {
      width: 100px;
      object-fit: cover;
      height: 100px;
    }
  }
}
</style>
